<template>
  <div>
    <div class="header">
      <div class="page-header">
        <el-page-header @back="goBack" content="接口访问日志"></el-page-header>
      </div>

      <el-button type="danger" icon="el-icon-delete" @click="deleteSysLog()" size="small"
                 :disabled="deleteable" style="margin-top:10px;margin-left: 20px">批量删除
      </el-button>

      <div class="search">
        <el-input v-model="pageRequest.key" style="width: 200px;margin-right: 10px"
                  placeholder="按用户名称或IP查找"
                  size="small"></el-input>
        <el-button type="primary" icon="el-icon-search" size="small" @click="getApiLogList">搜索</el-button>
      </div>

    </div>
    <el-card class="box-card" shadow="always">
      <template>
        <el-table
            ref="multipleTable"
            @selection-change="handleSelectionChange"
            :header-cell-style="{color:'#333',fontFamily:'MicrosoftYaHeiUI',fontSize:'14px',fontWeight:900}"
            size="mini" :data="apiLogList" style="width: 100%">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="userName" label="用户名" :show-overflow-tooltip='true'></el-table-column>
          <el-table-column prop="ip" label="ip地址" :show-overflow-tooltip='true'></el-table-column>
          <el-table-column prop="url" label="访问接口" :show-overflow-tooltip='true'></el-table-column>
          <el-table-column prop="requestMethod" label="请求方式" :show-overflow-tooltip='true'></el-table-column>
          <el-table-column prop="accessTime" label="访问时间" :show-overflow-tooltip='true'></el-table-column>
          <el-table-column prop="parameters" label="请求参数" :show-overflow-tooltip='true'></el-table-column>
          <el-table-column prop="responseBody" label="响应体" :show-overflow-tooltip='true'></el-table-column>
          <el-table-column prop="responseStatus" label="相应状态" :show-overflow-tooltip='true'></el-table-column>
          <el-table-column prop="spendTime" label="耗费时间" :show-overflow-tooltip='true'></el-table-column>
          <el-table-column
              fixed="right"
              label="操作">
            <template slot-scope="scope">
              <el-button @click="deleteSysLog(scope.row)"
                         icon="el-icon-delete" type="text"
                         size="small">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>

      <div class="block">
        <el-pagination
            style="float: right"
            background
            @size-change="handlePageSizeChange"
            @current-change="handlePageNumChange"
            :current-page="pageRequest.pageNum"
            :page-sizes="[10, 50, 100, 200]"
            :page-size="pageRequest.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageResult.total">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import {deleteApiLog, getApiLogList} from "@/api/ApiLog";
import {mapActions} from "vuex";
import MessageBoxUtil from "@/utils/MessageBoxUtil";

export default {
  name: 'ApiLogs.vue',
  data() {
    var validateNumber = (rule, value, callback) => {
      if (value && !/^-?\d*(\.\d+)?$/.test(value)) {
        return callback(new Error('输入不合法，请输入数值'));
      } else {
        callback();
      }
    };
    return {
      apiLogList: [],
      pageRequest: {
        pageNum: 1,
        pageSize: 10,
        key: ''
      },
      pageResult: {
        total: 0,
        totalPage: 0,
        size: 0,
      },
      dialogFormVisible: false,
      formLabelWidth: '90px',
      multipleSelection: [],
      event: {
        eventType: 0,
        title: ''
      },
      form: {},
      sysLogRules: {
        logId: [
          {required: true, message: '日志ID不能为空', trigger: 'blur'},
          {validator: validateNumber, trigger: 'blur'},
        ],
        status: [
          {validator: validateNumber, trigger: 'blur'},
        ],
      },
    }
  },
  //监听属性 类似于data概念
  computed: {
    deleteable() {
      return this.multipleSelection.length === 0
    }
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    ...mapActions('menu', ['refreshMenu']),

    getApiLogList() {
      getApiLogList(this.pageRequest).then(res => {
        if (res.code === 200) {
          this.apiLogList = res.data.dataList
          this.pageResult.size = res.data.size
          this.pageResult.total = res.data.total
          this.pageResult.totalPage = res.data.totalPage
          if (res.data.size === 0 && res.data.pageNum > 1) {
            this.pageRequest.pageNum--;
            this.getApiLogList();
          }
        }
      }).catch(err => {
        this.$message({
          type: 'error',
          message: '数据加载失败，' + err.message
        });
      })
    },
    deleteSysLog(row) {
      if (row) {
        this.multipleSelection = [row]
      }
      MessageBoxUtil.confirm("此操作将永久删除该数据，是否继续?", 'warn', () => {
        deleteApiLog(this.multipleSelection).then(res => {
          if (res.code === 200) {
            this.getApiLogList();
            this.$message({
              message: '删除成功',
              type: 'success'
            });
          } else {
            this.$message({
              type: 'error',
              message: res.message,
            });
          }
        }).catch(err => {
          this.$message({
            type: 'error',
            message: "数据删除失败，" + err.message
          });
        })
      })
    },

    dialogCancel() {
      this.dialogFormVisible = false;
      this.getApiLogList()
    },
    handlePageSizeChange(pageSize) {
      this.pageRequest.pageSize = pageSize;
      this.getApiLogList()
    },
    handlePageNumChange(pageNum) {
      this.pageRequest.pageNum = pageNum;
      this.getApiLogList()
    },
    handleSelectionChange(rows) {
      this.multipleSelection = rows;
    },
    goBack() {
      window.history.back()
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getApiLogList()
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
  },
};
</script>

<style scoped>

.header {
  /*display: flex;*/
  /*!*垂直对齐*!*/
  /*align-items: center;*/
  height: 50px;
  background-color: #eff4f9;
}

.page-header {
  float: left;
  margin-top: 15px
}

.search {
  float: right;
  margin-top: 10px
}

.box-card {
  height: 100%;
  padding-bottom: 5px;
}

.block {
  padding: 5px;
}

.el-tooltip {
  overflow: hidden;
}

</style>
